<template>
  <div>
    <!-- 按钮区域 -->
    <el-row style="margin-top: 30px">
      <el-col :span="10" :offset="3">
        <el-button type="info" @click="openDialog">农业问题一键提问</el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="primary">评价工单</el-button>
      </el-col>
    </el-row>

    <!-- 弹出框区域 -->
    <el-dialog
        title="提问农业问题"
        :visible.sync="dialogVisible"
        width="50%"
        @close="resetForm"
    >
      <el-form :model="form" label-width="100px">
        <el-form-item label="问题描述">
          <el-input type="textarea" v-model="form.description" placeholder="请输入您的问题"></el-input>
        </el-form-item>
        <el-form-item label="问题类别">
          <el-select v-model="form.type" placeholder="请选择问题类型">
            <el-option
                v-for="option in questionOptions"
                :key="option.value"
                :label="option.label"
                :value="option.value"
            />
          </el-select>
        </el-form-item>

        <!-- 图片上传区域 -->
        <el-form-item label="上传问题图片">
          <el-upload
              class="upload-demo"
              ref="upload"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>

      <!-- 操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitQuestion">提交</el-button>
      </span>
    </el-dialog>

    <el-carousel style="margin-top: 50px" :interval="5000" arrow="always">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false, // 控制弹框显示与隐藏
      form: {
        description: '',
        type: '',
        image: null, // 用于存储上传的图片信息
      },
      questionOptions: [], // 问题类别选项数据
      fileList: [] // 上传的文件列表
    };
  },
  methods: {
    // 打开弹框
    openDialog() {
      this.dialogVisible = true;
    },
    // 获取问题类别选项
    fetchQuestionOptions() {
      // 模拟从数据库获取问题类别数据
      this.questionOptions = [
        { value: 'agriculture', label: '农业生产' },
        { value: 'environment', label: '环境保护' },
        { value: 'policy', label: '政策法规' }
      ];
    },
    // 提交问题
    submitQuestion() {
      console.log('提交的表单数据:', this.form);
      // 在这里可以通过axios提交数据到后台
      // axios.post('/api/submit-question', this.form)
      //   .then(response => {
      //     console.log('问题提交成功:', response);
      //     this.dialogVisible = false;
      //   })
      //   .catch(error => {
      //     console.error('提交失败:', error);
      //   });
      this.dialogVisible = false; // 提交后关闭弹框
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    // 重置表单
    resetForm() {
      this.form.description = '';
      this.form.type = '';
      this.form.image = null;
      this.fileList = [];
    }
  },
  mounted() {
    this.fetchQuestionOptions();
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
